<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="../build/roslib.js"></script>

<script>
  // Connecting to ROS
  // -----------------
  var ros = new ROSLIB.Ros({
    // set this to false to use the new service interface to
    // tf2_web_republisher. true is the default and means roslibjs
    // will use the action interface
    groovyCompatibility : true
  });

  // If there is an error on the backend, an 'error' emit will be emitted.
  ros.on('error', function(error) {
    document.getElementById('connecting').style.display = 'none';
    document.getElementById('connected').style.display = 'none';
    document.getElementById('closed').style.display = 'none';
    document.getElementById('error').style.display = 'inline';
    console.log(error);
  });

  // Find out exactly when we made a connection.
  ros.on('connection', function() {
    console.log('Connection made!');
    document.getElementById('connecting').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('closed').style.display = 'none';
    document.getElementById('connected').style.display = 'inline';
  });

  ros.on('close', function() {
    console.log('Connection closed.');
    document.getElementById('connecting').style.display = 'none';
    document.getElementById('connected').style.display = 'none';
    document.getElementById('closed').style.display = 'inline';
  });

  // Create a connection to the rosbridge WebSocket server.
  ros.connect('ws://localhost:9090');

  // TF Client
  // ---------
  var tfClient = new ROSLIB.TFClient({
    ros : ros,
    fixedFrame : 'world',
    angularThres : 0.01,
    transThres : 0.01
  });

  // Subscribe to a turtle.
  tfClient.subscribe('turtle1', function(tf) {
    console.log(tf);
  });
</script>
</head>

<body>
  <h1>Simple TF Example</h1>
  <p>Run the following commands in the terminal then refresh this page. Check the JavaScript
    console for the output.</p>
  <ol>
    <li><tt>roslaunch turtle_tf turtle_tf_demo.launch</tt>
    </li>
    <li><tt>rosrun tf2_web_republisher tf2_web_republisher</tt>
    </li>
    <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt>
    </li>
    <li>Use your arrow keys on your keyboard to move the turtle (must have <tt>turtle_tf_demo.launch</tt>
      terminal focused).</li>
  </ol>
  <div id="statusIndicator">
    <p id="connecting">
      Connecting to rosbridge...
    </p>
    <p id="connected" style="color:#00D600; display:none">
      Connected
    </p>
    <p id="error" style="color:#FF0000; display:none">
      Error in the backend!
    </p>
    <p id="closed" style="display:none">
      Connection closed.
    </p>
  </div>
</body>
</html>
